<template>
  <div class="statistics">
    <scroll-view scroll-y class="wrapper">
      <div class="statistics-panel">
        <EchartPanel
          icon="icon-zhexian"
          iconBgColor="rgb(255, 131, 164)"
          title="收租年统计"
          canvasId="yearEchart"
          :echartObj="yearEchatOption">
          <div class="year-slot">
            <picker
              mode="multiSelector"
              :range="multiyearData"
              :value="yearValue"
              @change="yearChange">
              <div class="picker">{{yearContent}}</div>
            </picker>
          </div>
        </EchartPanel>
      </div>
      <div class="statistics-panel">
        <EchartPanel
          icon="icon-tongji1"
          iconBgColor="rgb(106, 206, 255)"
          title="收租月统计"
          rightSlot="2019"
          rightSlotWidth="35"
          canvasId="monthEchart"
          :echartObj="monthEchatOption">
          <div class="year-slot">
            <picker
              :range="yearData"
              :value="monthValue"
              @change="monthChange">
              <div class="picker">{{monthContent}}</div>
            </picker>
          </div>
        </EchartPanel>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import EchartPanel from 'components/EchartPanel/EchartPanel'
import { yearEchart, monthEchart } from './echarts'
import { ERR_OK } from 'api/config'
import { getYear, getMonth } from 'api/statistics'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    EchartPanel
  },
  computed: {
    yearContent () {
      return `${this.multiyearData[0][this.yearValue[0]]} ~ ${this.multiyearData[1][this.yearValue[1]]}`
    },
    monthContent () {
      return this.yearData[this.monthValue]
    }
  },
  mounted () {
    this.initYear()
    this.initData()
    this.getYearData()
    this.getMonthData()
  },
  data () {
    return {
      yearData: [],
      multiyearData: [[], []],
      yearValue: [5, 0],
      monthValue: 0,
      yearEchatOption: yearEchart(),
      monthEchatOption: monthEchart()
    }
  },
  methods: {
    yearChange (e) {
      this.yearValue = e.target.value
      this.getYearData()
    },
    monthChange (e) {
      this.monthValue = e.target.value
      this.getMonthData()
    },
    initData () {
      this.yearValue = [5, 0]
      this.monthValue = 0
    },
    initYear () {
      const now = new Date()
      const nowYear = now.getFullYear()

      const yearArr = []
      for (let index = 0; index < 10; index++) {
        yearArr.push(nowYear - index)
      }
      this.yearData = yearArr
      const reverseYear = JSON.parse(JSON.stringify(yearArr)).reverse()
      this.multiyearData = [reverseYear, yearArr]
    },
    async getYearData () {
      this.$showLoading('加载中')
      const data = {
        startYear: this.multiyearData[0][this.yearValue[0]],
        endYear: this.multiyearData[1][this.yearValue[1]]
      }
      const res = await getYear(data)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.yearEchatOption = yearEchart(res.data)
      } else {
        this.$showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    },
    async getMonthData () {
      this.$showLoading('加载中')

      const res = await getMonth(this.yearData[this.monthValue])

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.monthEchatOption = monthEchart(res.data)
      } else {
        this.$showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .statistics {
    width: 100%;
    height: 100%;
    background-color: rgb(248, 248, 248);
    position: relative;
    overflow: hidden;
    > .wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      .statistics-panel {
        margin-bottom: 10px;
        &:nth-last-of-type(1) {
          margin-bottom: 0;
        }
        .year-slot {
          flex: 0 0 85px;
          font-size: 14px;
          text-align: right;
          color: gray;
        }
      }
    }
  }
</style>
